<template>
  <div>
    <a-modal v-model:open="modalOpen" title="发货" width="600px" :footer="null">
      <a-space direction="vertical" style="width: 100%" :size="16">
        <a-form
          :model="formData"
          labelAlign="left"
          :label-col="{ span: 3 }"
          :wrapper-col="{ span: 21 }"
          ref="formRef"
        >
          <a-form-item
            label="物流单号"
            name="logisticsNo"
            :rules="[{ required: true, message: '物流单号不能为空!' }]"
          >
            <a-input
              v-model:value.trim="formData.logisticsNo"
              placeholder="输入物流单号"
              @change="handleChangeLog"
            />
          </a-form-item>

          <a-form-item
            label="物流公司"
            name="comCode"
            :rules="[{ required: true, message: '请选择物流公司' }]"
          >
            <a-select
              ref="select"
              v-model:value="formData.comCode"
              placeholder="请选择物流公司"
              @change="handleChangeCom"
            >
              <a-select-option
                v-for="item in logisticsList"
                :value="item.comCode"
                >{{ item.name }}</a-select-option
              >
            </a-select>
          </a-form-item>
        </a-form>
        <div class="modal-but-layout">
          <a-button type="primary" @click="handleSubmit">确认发货</a-button>
        </div>
      </a-space>
    </a-modal>
  </div>
</template>
<script setup>
import { ref } from "vue";
import { sendToPlatformGood, identiylogistics } from "@/api/order";
const modalOpen = ref(false);

const formData = ref({
  id: "",
  logisticsNo: undefined,
  orderType: undefined,
  type: undefined,
  comCode: undefined,
  name: null,
});
const formRef = ref(null);
const open = (id, orderType, type) => {
  formData.value.id = id;
  formData.value.orderType = orderType;
  formData.value.type = type;
  modalOpen.value = true;
};
const emits = defineEmits("refreshList");
const handleSubmit = () => {
  formRef.value.validate().then(async () => {
    const data = await sendToPlatformGood(formData.value);
    if (data.code === 200) {
      modalOpen.value = false;
      emits("refreshList", true);
    }
  });
};
function handleChangeLog(e) {
  identiylogisticsList(e.target.value.trim());
}
function handleChangeCom(val) {
  formData.value.name = logisticsList.value.find(
    (item) => item.comCode === val
  ).name;
}
// 获取快递列表
const logisticsList = ref([]);
const identiylogisticsList = async (val) => {
  const data = await identiylogistics({ logisticsNo: val });
  if (data.code === 200) {
    logisticsList.value = data.data;
  }
};
defineExpose({ modalOpen, open });
</script>

<style lang="less">
.img-item {
  width: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;

  .img-label {
    margin-top: 6px;
    color: #9599a5;
    font-size: 12px;
  }
}

.modal-but-layout {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
</style>
